import { Collapse, Input } from 'antd';
import React, { useState } from 'react';
import Components from '../../components/Components';
import styled from '@emotion/styled';
import './index.css';
import OutputType = Terminal.OutputType
import { doCommandExecute } from '../../terminal/doCommandExecute';
const { Panel } = Collapse;

const clear = ()=>{};

const App: React.FC = () => {
    const [ outputList, setOutputList ] = useState<OutputType[]>([]);
    const terminal :Terminal.TerminalType = {
        clear,
        writeOutput: function (output: OutputType): void {
            throw new Error('Function not implemented.');
        },
        writeTextOutput: function (text: string, status?: Terminal.OutputStatusType | undefined): void {
            throw new Error('Function not implemented.');
        },
        writeTextResult: function (text: string, status?: Terminal.OutputStatusType | undefined): void {
            throw new Error('Function not implemented.');
        },
        writeTextErrorResult: function (text: string): void {
            setOutputList([ ...outputList, {
                type:'command',
                text:'找不到命令!'
            } ]);
        },
        writeTextSuccessResult: function (text: string): void {
            throw new Error('Function not implemented.');
        },
        writeResult: function (output: OutputType): void {
            console.log(output, '--------');
            setOutputList([ ...outputList, {
                type:'component',
                text:'找不到命令!',
                component:output.component
            } ]);
        },
        focusInput: function (): void {
            throw new Error('Function not implemented.');
        },
        isInputFocused: function (): boolean {
            throw new Error('Function not implemented.');
        },
        setTabCompletion: function (): void {
            throw new Error('Function not implemented.');
        },
        doSubmitCommand: function (): void {
            throw new Error('Function not implemented.');
        },
        showNextCommand: function (): void {
            throw new Error('Function not implemented.');
        },
        showPrevCommand: function (): void {
            throw new Error('Function not implemented.');
        },
        listCommandHistory: function (): Terminal.CommandOutputType[] {
            throw new Error('Function not implemented.');
        },
        toggleAllCollapse: function (): void {
            throw new Error('Function not implemented.');
        },
        setCommandCollapsible: function (collapsible: boolean): void {
            throw new Error('Function not implemented.');
        }
    };
    const handlePressEnter = (e: React.KeyboardEvent<HTMLInputElement>)=>{
        doCommandExecute(e.currentTarget.value, terminal);
    };
    const onChange = (key: string | string[]) => {
        console.log(key);
    };
    return (
        <Container>
            <Collapse className="term-theme" defaultActiveKey={[ outputList.length ]} onChange={onChange} expandIconPosition='end' bordered={false}>
                {
                    outputList.map((item, index)=>
                        <Panel header={ item.type === 'component' ? '' : item.text} key={index} className='term-theme'>
                            {
                                item.type === 'component' && <Components>{item.component} </Components>
                            }
                            {
                                item.type === 'command' && <span>{item.text}</span>
                            }
                        </Panel>
                    )
                }
            </Collapse>
            <Input onPressEnter={handlePressEnter} />
        </Container>

    );
};

export default App;
const Container = styled.div`
height:100%;
background-color: black;
color:white
`;
